<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>前端必会的 3 种 css 布局技术</title>
    <style>
      /*  */
      body,
      ul {
        margin: 0;
        padding: 0;
      }
      ul {
        list-style: none;
      }
      /*  */
      .content {
        width: 1000px;
        margin: 0 auto;
      }
      .content1 {
        margin-top: 10px;
      }
      .content1 .content1-1 {
        width: 550px;
        height: 250px;
        background-color: red;
        float: left;
      }
      .content1 .content1-2 {
        width: 400px;
        height: 250px;
        background-color: yellow;
        float: right;
      }
      .content2 {
        margin-top: 50px;
      }
      .content2 .content2-1 {
        width: 150px;
        height: 250px;
        background-color: blue;
        margin-right: 50px;
        float: left;
      }
      .content2 .content2-2 {
        width: 500px;
        height: 250px;
        background-color: orange;
        margin-right: 50px;
        float: left;
      }
      .content2 .content2-3 {
        width: 250px;
        height: 250px;
        background-color: green;
        float: right;
      }
      .content3,
      .content4 {
        margin-top: 50px;
      }
      .content3 div,
      .content4 ul li {
        background-color: rgb(0, 109, 128);
        height: 150px;
        width: 180px;
        float: left;
        margin-right: 25px;
      }
      .content3 div:nth-child(5n),
      .content4 ul li:nth-child(5n) {
        margin-right: 0px;
        margin-bottom: 25px;
      }
      .clear {
        clear: both;
      }
      .clearfix::after {
        content: "";
        clear: both;
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="content1">
        <div class="content1-1"></div>
        <div class="content1-2"></div>
        <div class="clear"></div>
      </div>
      <div class="content2 clearfix">
        <div class="content2-1"></div>
        <div class="content2-2"></div>
        <div class="content2-3"></div>
      </div>
      <div class="content3 clearfix">
        <div class="content3-1"></div>
        <div class="content3-2"></div>
        <div class="content3-3"></div>
        <div class="content3-4"></div>
        <div class="content3-5"></div>
        <div class="content3-6"></div>
        <div class="content3-7"></div>
        <div class="content3-8"></div>
        <div class="content3-8"></div>
        <div class="content3-8"></div>
      </div>
      <div class="content4">
        <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
  </body>
</html>
